<template>
  <el-form  :model="form" ref="form" :rules="rules" label-position="top" label-width="80px">
  <el-row :gutter="30">
    <el-col :span="12">
      <el-form-item :label="$t('config.agent.parentDept')">
        <el-input disabled v-model.trim="form.prentsName" size="mini"></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="12">
      <el-form-item :label="$t('config.agent.deptName')"
                    prop="name">
        <el-input v-model.trim="form.name" size="mini"></el-input>
      </el-form-item>
    </el-col>
  </el-row>
  <el-row :gutter="30">
    <el-col :span="12">
      <el-form-item :label="$t('config.agent.sortNum')"
                    prop="order">
        <el-input v-model.trim="form.order"
                  size="mini"></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="12">
      <el-form-item :label="$t('config.agent.observer')">
         <agent-select
            :placeholder = "$t('config.agent.pleaseAddTemplept')"
            :multiple="true"
            :agent="form.observer"
            @agentChange = "agentChange"
            ref = "agentSelect"
          ></agent-select>
      </el-form-item>
    </el-col>
  </el-row>
  <el-row :gutter="30">
    <el-col :span="24">
      <el-form-item :label="$t('public.remark')">
        <el-input
          type="textarea"
          size="mini"
          :autosize = "{ minRows: 2, maxRows: 4}"
          :placeholder = "$t('public.pleaseEnter')"
          v-model = "form.note">
        </el-input>
      </el-form-item>
    </el-col>
    <el-col :span="24">
      <el-form-item class="btn-group">
        <el-button @click.stop="cancel" class="primary_btn">{{$t('public.cancel')}}</el-button>
        <el-button type="primary" @click.stop="onSubmit" class="primary_btn">{{$t('public.save')}}</el-button>
      </el-form-item>
    </el-col>
  </el-row></el-form>
</template>
<script>
  import { deepClone } from '@/utils/m7Utils'
  import {checkform} from '@/utils/validate'
  import AgentSelect from '@/components/public-modules/cache/AgentSelect'
  export default {
    name: 'Form',
    data () {
      let validate1 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error(this.$t('validate.required')))
        } else if (checkform(value, 'Number')) {
          callback(new Error(this.$t('config.agent.shouldNumber')))
        } else {
          callback()
        }
      }
      return {
        depts: null,
        form: {
          _id: '',
          pId: '',
          prentsName: '',
          name: '',
          order: 0,
          observer: [],
          treePath: '',
          note: ''
        },
        rules: {
          name: [
            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
          ],
          order: [
            {validator: validate1, trigger: 'blur'}
          ]
        }
      }
    },
    components: {
      AgentSelect
    },
    props: {
      initForm: Boolean,
      initData: {
        type: Object,
        default: function () {
          return {}
        }
      }
    },
    watch: {
      initForm (cur, old) {
        if (cur) {
          this.init()
        }
      }
    },
    methods: {
      onSubmit () {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.form.observer = this.$refs.agentSelect.value || []
            this.$emit('submit', this.form)
          }
        })
      },
      cancel () {
        this.form = deepClone(this.initData)
        this.$emit('cancel')
      },
      init () {
        this.form = deepClone(this.initData)
        let agent = this.$refs.agentSelect
        if (agent) {
          if (this.form.observer === '') {
            agent.value = []
          } else {
            agent.value = this.form.observer
          }
        }
      },
      agentChange (val) {
        this.form.agent = val
      }
    },
    beforeMount () {
      this.init()
    }
  }
</script>
<style lang="stylus" scoped>
.btn-group
  margin 20px auto 0
  display flex
  flex-align center
  justify-content center
.el-select
    width 100%
  .el-col-8
    .el-input
      font-size 12px
</style>
